body, html {
  overflow-x:hidden
}
.banner {
  height:231px;
  background:none;
  z-index:5;
  .txt {
    top:0;
    background:transparent
  }
  .pic {
    top:auto;
    bottom:-4px
  }
  .left-line, .right-line {
    width:30%;
    top:auto;
    bottom:32px;
    em {
      width:auto;
      height:12px;
      background:transparent;
      @include rotate(-90deg);
      font-size:30px;
      color:#fff
    }
  }
  .right-line em {
    @include rotate(90deg);
  }
}
#three {
  position:relative;
  min-width:1000px;
  .container {
    width:auto;
    padding-top:83px;
    padding-bottom:90px
  }
}
.mask {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:4;
  background:url('../../images/common/cover.png') center 0
}
.hot-list {
  .it {
    float:left;
    position:relative;
    a {
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:10
    }
  }
  .info {
    position:absolute;
    z-index:10;
    color:#fff;
    text-align:center;
    white-space:nowrap;
    p {
      line-height:34px
    }
    span {
      width:100px;
      position:relative;
      left:24px
    }
    .name {
      padding-top:20px;
      font-size:32px
    }
    .subname {
      font-size:20px
    }
    .icon {
      background-repeat:no-repeat
    }
    .tips {
      display:block;
      font-size:30px;
      margin-top:100%;
      @include rotate(90deg)
    }
  }
  .avatar {
    display:block;
    background-repeat:no-repeat;
    background-size:cover
  }
  .it1 {
    width:378px;
    margin:0 auto;
    float:none;
    .avatar {
      height:437px;
    }
    .icon {
      width:65px;
      height:72px;
      background-image:url('../../images/icon/first.png')
    }
    .info {
      right:-170px;
      top:90px
    }
  }
  .it2, .it3 {
    float:left;
    width:50%;
    position:relative;
    top:-18px;
    .avatar {
      width:307px;
      height:354px
    }
    .info {
      top:-130px
    }
  }
  .it2 {
    .avatar {
      float:right;
      margin-right:191px
    }
    .info {
      right:423px;
      span {
        float:right;
        left:auto;
        right:24px
      }
    }
    .tips {
      float:right;
      @include rotate(-90deg)
    }
    .icon {
      width:64px;
      height:74px;
      background-image:url('../../images/icon/second.png')
    }
  }
  .it3 {
    .avatar {
      float:left;
      margin-left:191px
    }
    .info {
      left:423px
    }
    .icon {
      width:64px;
      height:74px;
      background-image:url('../../images/icon/third.png')
    }
  }
}
#three-d {
  position:relative;
  min-width:1000px;
  .mask {
    background-image:url('../../images/common/cover1.png')
  }
  .container {
    width:auto;
    padding-top:249px;
    padding-bottom:200px
  }
  .avatar {
    position:relative;
    z-index:1;
    display:block;
    width:378px;
    height:437px;
    margin:0 auto;
    background-size:cover
  }
  .content {
    position:relative;
    z-index:5;
    color:#fff;
    text-align:center
  }
  .name {
    padding-top:50px;
    font-size:60px
  }
  .subname {
    font-size:30px
  }
  .txt {
    max-width:735px;
    margin:0 auto;
    padding-top:30px;
    line-height:36px;
    font-size:20px
  }
  #video {
    width:1000px;
    margin:80px auto 0;
    border:solid 4px $color-theme;
    border-radius:3px;
    iframe {
      display:block
    }
  }
}